<template>
	<view class="content">
		<view class="u-search">
			<u-search style="width: 680rpx;margin: 20rpx auto;" placeholder="搜索食物查热量" height="80rpx"
				searchIconSize="40rpx" actionText="取消" @search="onSearch" @change="onChange" v-model="valModel"
				@custom="goToBack">
			</u-search>
		</view>
		<view class="trending" v-if="showMode">
			<view class="title">
				热&nbsp;搜
			</view>
			<ul class="lis">
				<li v-for="item in liList" @click="onClick(item)">{{item}}</li>
			</ul>
			<!-- <view class="title" @click="ontiaozhua">
				排&nbsp;行
			</view> -->
			<view class="title" @click="goToRankList">
				排行榜
				<span>&gt;</span>
			</view>
		</view>
		<view class="goodsList" v-else>
			<ul>
				<li v-for="(item,index) in searchList" :key="index">
					<view class="left">
						<image :src="item.url"></image>
						<view class="box">
							<view class="text">
								{{item.text}}
							</view>
							<view class="kcal">
								<span>{{item.kcal}}Kcal</span>
								<span class="center">/</span>
								<span>{{item.num}}</span>
							</view>
						</view>
					</view>
					<view class="right">
						<u-button :type="item.type" size="mini"></u-button>
					</view>
				</li>
			</ul>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 热搜的文字
				liList: ['玉米', '白米', '鸡蛋', '香蕉', '西瓜', '牛肉', '鸡肉', '土豆', '生菜', '牛奶'],
				valModel: '',
				// true 显示热搜  ,  false 显示搜索结果
				showMode: true,
				goodsList: [],
				// 搜索出的数据
				searchList: []
			};
		},
		onLoad() {
			this.goodsList = JSON.parse(uni.getStorageSync('searchList'))
			// console.log(this.goodsList);
		},
		onUnload() {
			uni.removeStorageSync('searchList')
		},
		methods: {
			goToRankList() {
				uni.navigateTo({
					url: "/pages/rankList/rankList"
				})
			},
			// 监听搜索框中输入的内容
			onChange(val) {
				// console.log(val);
				// 当搜索框内容为空是显示热搜
				if (val.trim() == '') {
					this.showMode = true
					this.searchList = []
				}
			},
			// 回车或点击键盘搜索时
			onSearch(val) {
				// 当搜索框中内容不为空时显示搜索结果
				if (val.trim() !== '') {
					this.showMode = false
					this.goodsList.forEach(e => {
						var a = e.filter(item => {
							return item.text.includes(val)
						})
						this.searchList.push(...a)
					})
				}
			},
			// 点击热搜下的li , 进行搜索
			onClick(val) {
				// console.log(val);
				this.valModel = val
				this.onSearch(this.valModel)
			},
			// 点击取消回到食物库
			goToBack() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	* {
		padding: 0;
		margin: 0;
	}

	.content {
		background-color: #fff;
	}

	// .u-search {
	// padding: 0 10rpx;
	// }

	.trending,
	.goodsList {
		padding: 38rpx;

		.title {
			font-size: 40rpx;
			margin-bottom: 20rpx;
			font-weight: bold;
			padding-left: 10rpx;

			span {
				padding-left: 20rpx;
				font-family: '楷体';
				// font-weight: bold;
			}
		}
	}

	.lis {
		width: 690rpx;
		// background-color: #ccc;
		margin: 0 auto 20rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;

		li {
			list-style: none;
			color: #00cccc;
			border: 1px solid #00cccc;
			padding: 8rpx 26rpx;
			margin: 20rpx 8rpx;
		}
	}

	.goodsList {
		ul {
			width: 100%;
			margin-bottom: 100rpx;

			li {
				list-style: none;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid #efefef;
				padding: 40rpx 0;
				margin: 0 30rpx;

				.left {
					display: flex;
					align-items: center;

					image {
						width: 150rpx;
						height: 100rpx;
						padding-right: 20rpx;
					}

					.center {
						padding: 0 10rpx;
						color: #757575;
					}

					.text {
						margin-bottom: 10rpx;
					}
				}

				.right {
					margin-right: 30rpx;
					width: 50rpx;
					height: 44rpx;
					border-radius: 8rpx;
					overflow: hidden;
				}
			}
		}

		/deep/uni-button:after {
			width: 100%;
			border: none;
		}

		/deep/.u-button--info {
			border: none;
		}
	}
</style>
